<html #test>
<head>
  <style>
    body { margin:0; padding:0; width:100%; height:100%; }
    div { margin:6px; }
    div#base
    {
      border:1px solid red;
      width: 50%;
    }
    div#test1
    {
      border:1px solid black;
      width: calc( 50% + 40px);
    }
    div#test2
    {
      border:1px solid blue;
      width: calc( max-intrinsic-width() + 40px );
    }
    div.test3
    {
      border:1px solid green;
      width: calc( self:index * 10% );
    }
    div#test4
    {
      border:1px solid maroon;
      height: calc( intrinsic-height() + 40px );
    }
    div#test5
    {
      border:1px solid cyan;
      height: calc( 2px + 25% );
    }
    
  </style>  
</head>
<body #test>
  <H1>CSS <code>calc()</code> function test</H1>
  <div #base>Reference: <code>width: 50%;</code></div>  
  <div #test1><code>width: calc( 50% + 40px);</code></div>
  <div #test2><code>width: calc( max-intrinsic-width() + 40px);</code></div>
  <div .test3><code>width: calc( self:index * 10% );</code></div>  
  <div .test3><code>width: calc( self:index * 10% );</code></div>  
  <div .test3><code>width: calc( self:index * 10% );</code></div>  
  <div #test4><code>height: calc( intrinsic-height() + 40px );</code></div>
  <div #test5><code>height: calc( 2px + 25% );</code></div>
</body>
</html>